<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="divport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="dist/styles/iview.css">
    <title>录音记录</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        html,body{
            height: 100%;
            width: 100%;
            background-color: rgba(246, 246, 246, 0.897);
        }
        div.container{
            width: 375px;
            height: 667px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top:-333.5px;
            margin-left:-187.5px;    
            background-color:#fff; 
            display: flex;
            flex-direction: column;
        }
        div.record-body{
            overflow-y: auto;
            flex: 1;
        }

.body-item{
  display: flex;
  flex-direction: row;
}
.body-item .person,.send-item .person{
  height: 60px;
  line-height: 58px;
  padding: 0 10px;
  font-size: 24px;
  color: #090909;
}
.send-item{
  display: flex;
  flex-direction: row-reverse;
}

/* 语音气泡 */
.speech {
    float: left;
    margin: 8px;
    padding: 6px;
    table-layout: fixed;
    word-break: break-all;
    position: relative;
    background: #ffffff;
    border: 1px solid #989898;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    cursor: pointer;
}
.duration{
    height: 30px;
    line-height: 30px;
    padding: 0 20px 0 30px;
    font-size: 14px;
}
.audio-icon{
  width: 30px;
  height: 30px;
  position: relative;
}
.speech:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    top: 10px;
    border: 10px solid;
    border-color:  transparent #989898 transparent  transparent ;
}
.speech:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 left: -16px;
 top: 12px;
 border: 8px solid;
 border-color: transparent #ffffff transparent transparent ;
}

.speech2 {
    float: left;
    margin: 8px;
    padding: 6px;
    table-layout: fixed;
    word-break: break-all;
    position: relative;
    background: #ffffff;
    border: 1px solid #989898;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
}
.speech2 .duration{
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    font-size: 14px;
}
.speech2:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: -20px;
    top: 10px;
    border: 10px solid;
    border-color:  transparent transparent  transparent #989898;
}
.speech2:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 right: -16px;
 top: 12px;
 border: 8px solid;
 border-color: transparent  transparent transparent #ffffff;
}


        .box {
            box-sizing: border-box;
            position: relative;
        }
        .wifi-symbol {
            width: 30px;
            height: 30px;
            box-sizing: border-box;
            overflow: hidden;
            transform: rotate(135deg);
        }
        .wifi-circle {
            border: 3px solid #999999;
            border-radius: 50%;
            position: absolute;
        }

        .first {
            width: 3px;
            height: 3px;
            background: #cccccc;
            top: 26px;
            left: 26px;
        }

        .second {
            width: 15px;
            height: 15px;
            top: 19.8px;
            left: 19.8px;
            animation: fadeInOut 1s infinite 0.3s;
        }

        .third {
            width: 24px;
            height: 24px;
            top: 15px;
            left: 15px;
            animation: fadeInOut 1s infinite 0.6s;
        }

        @keyframes fadeInOut {
            0% {
                opacity: 0; /*初始状态 透明度为0*/
            }
            100% {
                opacity: 1; /*结尾状态 透明度为1*/
            }
        }

.is-played{
  width: 10px;
  position: relative;
}
.is-played::before{
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 0px;
  top: 24px;
  border: 4px solid;
  border-color: red;
  border-radius: 50%;
}

div.delete-media>div{
    width: 30px;
    height: 30px;
    margin-top: 15px;
    cursor: pointer;
}

/* 底部 控制器 */
.ctrl{
  height: 45px;
  position: relative;
  display: flex;
  flex-direction: row;
  box-sizing:  border-box;
}
.time-wrappr{
  width: 120px;
  height: 45px;
  border-top: 1px solid #f3f3f3;
}
.fast-record{
  height: 45px;
  text-align: center;
  line-height: 45px;
  flex: 1;
  color: #ffffff;
  background-color: #206AC9;
  font-size: 15px;
  cursor: pointer;
}

[v-cloak]{display: none}


        .select-wrap{
            height: 100%;
            width: 100%;
            position: relative;
            cursor: pointer;
        }
        div.now-text{
            height: 100%;
            width: 100%;
            text-align: center;
            line-height: 45px;
            position: relative;
            padding-left: 20px;
        }
        div.now-text::before{
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            left: 20px;
            top: 7px;
            border: 10px solid;
            border-color:  transparent transparent #989898 transparent ;
        }
        div.options-wrap{
            position: absolute;
            bottom: 45px;
            left: 0;
            width: 120px;
            z-index: 9999;
            border-left: 1px solid #f6f6f6; 
            border-right: 1px solid #f6f6f6; 
            background-color: #fff;
        }
        div.options-item{
            height: 45px;
            text-align: center;
            line-height: 45px;
            border-top: 1px solid #f6f6f6; 
        }
        .interval-number{
  position: absolute;
  bottom: 48px;
  left: 3px;
  width: 45px;
  height: 45px;
  background-color: #e4393c;
  border-radius: 50%;
  line-height: 45px;
  text-align: center;
  color: #ffffff;
}   
    </style>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/polyfill.min.js"></script>
</head>
<body>
    <div class="container" id="app" v-cloak>
        <audio ref="music"></audio>
        <div class='record-body' ref="recordsWrapper">
            <template v-for="(item,index) in tableData" :key="index">

                            <div class='body-item' v-if="item.senddirection === 1">
                                    <div class='person'>
                                        <Icon type="md-tablet-portrait" size="24" />
                                        <!-- <span class="icon iconfont icon-iconmydevices" style='font-size:24px;'></span>   -->
                                    </div>
                                    <div class='speech' @click="playYuYin(index)">
                                        <div class='duration'>{{item.updatetimeStr}}</div>
                                        <div class='audio-icon box'>
                                        <div class="wifi-symbol" v-show="item.show">
                                            <div class="wifi-circle first"></div>
                                            <div class="wifi-circle second"></div>
                                            <div class="wifi-circle third"></div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class='is-played' v-if="item.readstatus === 0"></div>
                                    <div v-else class="delete-media">
                                        <div @click="deleteRecord(item)"><img src="./images/ic_close.png" style="width:100%;height:100%;"></div>
                                    </div>
                                </div>
                                <div v-if="item.senddirection === 2" class='send-item'>
                                    <div class='person'>
                                        <Icon type="ios-contact" size="24" />
                                        <!-- <span class="icon iconfont icon-shenfenzheng" style='font-size:24px;'></span>   -->
                                    </div>
                                    <div class='speech2'>
                                        <div class='duration'>{{item.updatetimeStr +" "+ item.intervalseconds +"s"}}</div>
                                    </div>
                                    <div class="delete-media">
                                        <div @click="deleteRecord(item)"><img src="./images/ic_close.png" style="width:100%;height:100%;"></div>
                                    </div>
                                </div>
                  
            </template>
        </div>
        <div class='ctrl'>
                
                <div class='time-wrappr'>
                    <div class="select-wrap">
                        <div class="now-text" @click="isShowSelect=!isShowSelect">{{selectVal}}</div>
                        <div class="options-wrap" v-show="isShowSelect">
                            <div class="options-item" v-for="item in selectArr" :key="item" @click="onSelect(item)">{{item}}</div>
                        </div>
                    </div>
                </div>
                <div class='fast-record' @click="handleClickSound">
                    点击录音
                </div>
        </div>
        <div class="interval-number">{{intervalNumber}}</div>
    </div>
    <script src="js/gps51-jquery.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/vue-i18n.min.js"></script>
    <script src="js/language.js"></script>
    <script src="js/config.js"></script>
    <script src="js/util.js"></script>
    <script src="js/dateformat.js"></script>
    <script>
        var token = utils.getParameterByName("token");
        
        var vRoot = new Vue({
            i18n: utils.getI18n(),
            el:"#app",
            data:{
                intervalNumber:60,
                currentIndex:null,
                audio:null,
                deviceId:"",
                isShowSelect:false,
                selectVal:"10s",
                selectArr:["10s","20s","30s"],
                tableData:[]
            },
            methods: {
                deleteRecord:function(item){
                    var index = this.tableData.indexOf(item);
                    var url = myUrls.deleteAudio() , me = this;
                    if(!confirm("确认删除这条记录?")) return ;
                    utils.sendAjax(url,{mediaid:item.mediaid},function (resp) { 
                        if(resp.status == 0){
                            me.tableData.splice(index,1);
                        }
                    });
                },
                onSelect:function(val){
                    this.isShowSelect = false;
                    this.selectVal = val;
                },
                playYuYin:function(index){
                    if(index === this.currentIndex) return;
                    var audio = this.$refs.music;
                    var item =  this.tableData[index];
                    this.tableData.forEach(function(record){ record.show = false; });
                    item.show = true;
                    if(!audio.paused){              
                        audio.pause();  
                    }   
                    audio.src = item.url;
                    audio.play();
                    item.readstatus !== 1 ? this.readMedia(item.mediaid) : "";
                    item.readstatus = 1;
                    this.currentIndex = index;

                },
                readMedia:function (mediaid) { 
                    var url = myUrls.readMedia();
                    utils.sendAjax(url,{mediaid:mediaid},function (resp) {});
                },
                handleClickSound:function(){
                    if(this.deviceId == "") return; 
                    var me = this;
                    var url = myUrls.recordAudio();
                    utils.sendAjax(url, { deviceid: this.deviceId, interval: parseFloat(this.selectVal)} ,function (resp) { 
                        if(resp.status == 0){
                            setTimeout(function () { document.getElementsByClassName("record-body")[0].scrollTop = 10000; },10);
                            me.queryMedia();
                            me.$Message.success("发送成功");
                        }else{
                            me.$Message.error("发送失败");
                        }
                    });
                },
                queryMedia() {
                    var url = myUrls.queryMedia() , me = this;
                    utils.sendAjax(url,{deviceid:this.deviceId},function (resp) { 
                        if(resp.status == 0){
                            if(resp.records && resp.records.length){
                                var tableData = [] ,
                                    records = resp.records;
                                    for (var index = 0; index < records.length; index++) {
                                        const record = records[index];
                                        record.show = false;
                                        record.updatetimeStr = DateFormat.longToDateTimeStr(record.updatetime, 0);
                                        tableData.push(record);
                                    }
                                me.tableData = tableData.sort(function (a,b) { return a.updatetime - b.updatetime;});
                                setTimeout(function () { document.getElementsByClassName("record-body")[0].scrollTop = 10000; },10);
                            }
                            
                        }else{

                        }

                    })
                },
                getLocalMediaByDeviceId:function(deviceId){
                    var isHas = true; 
                    var newPushLocalMedia = localStorage.getItem("devicemedia-" + deviceId);
                    console.log("newPushLocalMedia", newPushLocalMedia);
                    if(newPushLocalMedia !== null && newPushLocalMedia !== "null"){

                        var newPushLocalMediaObject = JSON.parse(newPushLocalMedia);
                        var mediaid = newPushLocalMediaObject.mediaid;
                        for(var i = 0 ; i < this.tableData.length ;i++){
                            console.log(mediaid, this.tableData[i].mediaid);
                            if(mediaid == this.tableData[i].mediaid){
                                isHas = false;
                                break;
                            }
                        }
                    }else{
                        isHas = false;
                    }
                    return isHas;
                },
                clearLocalMedia:function(){
                    localStorage.setItem("devicemedia",null);
                },
                queryLocalMedia:function(){
                    var newMedia = this.getLocalMediaByDeviceId(this.deviceId) , me = this;
                    console.log('newMedia', newMedia);
                    if(newMedia == true)
                    {

                        // newMedia.show = false;
                        // newMedia.updatetimeStr = DateFormat.longToDateTimeStr(newMedia.updatetime, 0);
                        // this.tableData.push(newMedia);
                        // this.clearLocalMedia();
                        // setTimeout(function () { document.getElementsByClassName("record-body")[0].scrollTop = 10000; },10);
                        me.queryMedia();
                    }
                }
            },
            mounted:function(){
                var deviceId = utils.getParameterByName("deviceid");
                var me = this;
                this.audio = this.$refs.music; 
                if(deviceId){
                    this.deviceId = deviceId;
                    this.queryMedia();
                }
                setInterval(function () { 
                    me.intervalNumber = --me.intervalNumber;
                    if(me.intervalNumber%5 == 0){
                        me.queryMedia();
                    }
                    if(me.intervalNumber < 1){
                        me.intervalNumber = 60;
                        // me.queryMedia();
                    };
                 },1000);
            }
        })
    </script>
</body>
</html>